<template>
	<view>
		<scroll-view scroll-x="true" class="scroll-content">
			<view v-for='(item,index) in topBar':key='index' class="scroll-item" @tap="changeTab(index)" >
				<text :class='topBarIndex===index?"f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>
		
		<!-- 动态改变swiper高度 -->
		<swiper @change="onchangeTab" :current="topBarIndex" :style="'height:'+shopHeight+'px;'">
			<swiper-item v-for='(item,index) in topBar':key='index'>
				<view>{{item.name}}</view>
				<!-- 南北区店铺 -->
				<view style="margin: 10rpx 30rpx; font-size: 12px;" id="shops">
				  <uni-row :gutter='10'>
				    <uni-col :span='12' v-for="(item,shopIndex) in shopList" :key="shopIndex" v-if="item.scope===topBarIndex">
						<view @click="intoShop(item.id)" style="margin: 15rpx 15rpx; background-color: white; padding: 10rpx 30rpx; border-radius: 10px;text-align: center;">
							<image :src="item.image" style="height: 220rpx; width: 220rpx;"></image>
							<view class="lineEllipsis">{{ item.name }}</view>
							<view v-if="item.status===2" style="background-color: green;">空闲中</view>
							<view v-else-if="item.status===1"style="background-color: orangered;">忙碌中</view>
							<view v-else-if="item.status===0" style="background-color: grey;">休息中</view>
						</view>
				    </uni-col>
				  </uni-row>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script scoped>
	import { baseUrl } from '../../config/config'
		export default {
			data() {
				return {
					topBarIndex: 0,
					topBar:[
						{name: '北区'},
						{name: '南区'}
						
					],
					//内容块的高度值
					shopHeight: 0,
					shopList:[
						
					]
				}
			},
			onLoad() {
				
			},
			onShow() {
				let index=uni.getStorageSync('topBarIndex')
				if(index!=null&&index!=void 0)
					this.topBarIndex=index		
				let token=uni.getStorageSync('token')
				uni.request({
					url: baseUrl+'/shop/list',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'authentication': token,
					},
					success: (res) => {
						if(res.data.code===0)return;
						this.shopList=res.data.data
						this.changeTab(index)
					}
				})
				
			},
			onReady() {
				//获取当前shop的高度，然后将swiper的高度改变
				let view= uni.createSelectorQuery().select("#shops")
				//console.log(view)
				view.boundingClientRect(data=>{
					//console.log(data.height)
					this.shopHeight=data.height+50
				}).exec()
			},
			methods:{
				changeTab(index){
					this.topBarIndex=index;
					uni.setStorageSync('topBarIndex',index)
					//还需要等待一下v-for执行完成之后，才能切换成当前区域的shop高度
					setTimeout(()=>{
						let view= uni.createSelectorQuery().select("#shops")
						view.boundingClientRect(data=>{
							//console.log(data.height)
							this.shopHeight=data.height+50
						}).exec()
					},10)
					
				},
				onchangeTab(e){
					//传过来了滑动窗口的所有属性，并且它的current为topBarIndex
					//我们只需要调用changeTab(current)即可
					
					this.changeTab(e.detail.current)
					
				},
				intoShop(id){
					uni.setStorageSync('shopId',id)
					uni.navigateTo({
						url: '/pages/shop/shop'
					})
				},
				
			}
		}
</script>
<style>
.scroll-content{
	width: 100%;
	height:80rpx;
	white-space: nowrap;
	text-align: center;
}
.scroll-item{
	display: inline-block;
	padding: 10rpx 130rpx;
	font-size: 40rpx;
}
.f-color{
	color: #e7c95a;
}
.f-active-color{
	color:#eca900 ;
	padding: 10rpx 0;
	border-bottom:6rpx solid #e8b416;
	font-weight: bold;
}
.lineEllipsis {
	/* 超出几行省略 */
	overflow: hidden;
}
#shops{
	
}
</style>